<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div class="box1">
        <h1></h1>
        <ul></ul>
    </div>
    <div class="box2">
        <h1></h1>
        <img src="" style="width: 100px;" alt="">
        <ul></ul>
    </div>

    <script>
        var data1 = {
            title:'体育',
            list:['体育1'  ,'体育2' , '体育3']
        }

        var data2 = {
            title:'游戏',
            imgUrl:'https://gimg3.baidu.com/game/src=https%3A%2F%2Fgameplus-platform.cdn.bcebos.com%2Fgameplus-platform%2Fupload%2Ffile%2Fsource%2F407accd407415714d8159edbe63fff5c.jpeg&refer=http%3A%2F%2Fwww.baidu.com&app=2014&size=w256&n=0&g=0n&q=100&fmt=auto?sec=1710262800&t=d841532008aa89ba44fe0d5c4bf4f9a4',
            list:['lol' , '游戏2' , 'game']
        }


        class createBox{

            constructor (ele , data){
                this.box = document.querySelector(ele)

                this.title = data.title
                this.list = data.list
            }
            render(){

                let h1 = this.box.querySelector('h1')
                let ul = this.box.querySelector('ul')
                h1.innerHTML = this.title
                ul.innerHTML = this.list.map(item => (
                    `<li>${item}</li>`
                )).join('')
            }
        }

        let box = new createBox('.box1' , data1)
        box.render()


        class creatImgBox extends createBox {
            constructor(ele , data ){
                super(ele , data)
                this.imgUrl = data.imgUrl
            }
            render(){
                super.render()
                let img = this.box.querySelector('img')
                img.src = this.imgUrl
            }
        }
        let box2 = new creatImgBox('.box2' , data2)
        box2.render()





    </script>
</body>
</html>